<template>
  <view class="login-container">
    <julian-header title="登录"></julian-header>

    <view class="flex-center-column">
      <!-- <image src="https://julian-resource.oss-cn-shanghai.aliyuncs.com/xinqiao/logo.png" class="logo" mode=""></image> -->
      <view class="mt-70">
        <view class="form-item">
          <input type="text" focus placeholder="请输入账号" v-model="username" maxlength="11" />
        </view>
        <view class="form-item mt-40">
          <input type="text" password placeholder="请输入密码" v-model="password" />
        </view>

        <view class="font-size-26 font-weight-600 color-696868 mt-20 text-underline" style="text-align: right" @click="$Router.push('/pages/login/forgetPsd')"> 忘记密码 </view>
        <button @click="psdLoginFunc" class="background-DC9F2D font-size-26 color-FFFFFF border-radius-100 login-btn">登录</button>
      </view>
      <view class="font-size-26 font-weight-600 color-696868 mt-65 text-underline" open-type="getUserInfo" @click="getUserProfile">使用微信登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    psdLoginFunc() {
      if (this.username.trim() === '' || this.password.trim() === '') {
        return this.$tip.toast('手机号或密码不能为空')
      }
      if (this.$reg.checkPhone(this.username) !== 'ok') {
        return this.$tip.toast('手机号码格式不正确')
      }
      this.$tip.loading('登录中...')
      let data = {
        username: this.username,
        password: this.password
      }
      this.$api.psdlogin(data).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.$tip.loaded()
          wx.setStorageSync('token', data.token)
          this.$store.dispatch('userInfo')
          // this.$uni.subscribe()
        } else {
          this.$tip.loaded()
          this.$tip.toast(msg)
        }
      })
    },

    getUserProfile() {
      wx.getUserProfile({
        desc: '获取您的微信个人信息',
        success: res => {
          uni.setStorageSync('wxUserInfo', res.userInfo)
          this.wxLogin()
        },
        fail() {
          wx.showToast({
            title: '取消授权',
            icon: 'none',
            duration: 1500,
            mask: true
          })
        }
      })
    },

    async wxLogin() {
      const code = await this.$uni.getMpCode()
      this.$tip.loading()
      this.$api
        .wxLogin({ code })
        .then(res => {
          this.$tip.loaded()
          const { data } = res.data
          this.$store.commit('SET_TOKEN', data.token)
          this.$store.commit('SET_USERINFO', data.user)

          // this.$uni.subscribe(['A-4KfjTYx9lLkbkEK62vMyUAK8ku6teFuNfFRbr0BCU', 'jZEt5TlY05PxUHiIV6bKa23nuBDRWEbV5Ic3HagaY4I'], false)
          uni.switchTab({ url: '/pages/tabbar/home' })
        })
        .catch(() => {
          this.$tip.loaded()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
button::after {
  border: none;
}

.logo {
  width: 188rpx;
  height: 188rpx;
  margin-top: 202rpx;
}

.form-item {
  width: 500rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #f1f1f1;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  padding-left: 48rpx;
}

.login-btn {
  height: 84rpx;
  line-height: 84rpx;
  margin-top: 125rpx;
}
</style>
